<script setup lang="ts">
import {useUserStore} from "@/store/user";

const userStore = useUserStore();
const userInfo = userStore.userInfo;
const toUserInfo = () => {
  uni.navigateTo({
    url: '/pages/user/userInfo/userInfo'
  })
}

const goto = (url: string) => {
  uni.navigateTo({
    url: url
  })
}
</script>

<template>
  <view class="bar"></view>

  <view>
    <view class="header" @click="toUserInfo()">
      <u-avatar sex-icon="man" :show-sex="true" size="90" :src="userInfo.avatar"></u-avatar>
      <view class="user_text">
        <text class="user_name u-line-1">{{ userInfo.nickName }}</text>
        <text class="user_number">账号：{{ userInfo.userName }}</text>
      </view>
      <u-icon name="arrow-right"></u-icon>
    </view>

    <view class="user-card">
      <image class="user-card-image" src="/static/images/user/menban.png"></image>
      <image class="menban-item" src="/static/images/user/menban-item.png"/>
      <view class="car-content">
        <view class="card-text">
          <text style="color: white;margin-top: 15rpx">精灵卡</text>
          <text style="margin-top: 15rpx;font-size: 22rpx">你的精灵卡在
            <text style="font-size: 30rpx;color: white;margin: 0 10rpx">99</text>
            天后过期
          </text>
        </view>
        <view style="align-self: center">
          <up-button color="rgba(247, 196, 67, 1)" style="color: black" class="card-btn" shape="circle" text="">
            立即续费
          </up-button>
        </view>
      </view>
    </view>

    <view class="setting">
      <view class="setting-item">
        <image src="/static/images/user/money.png" class="setting-item-image"></image>
        <text class="setting-item-text">钱包</text>
        <u-icon name="arrow-right"></u-icon>
      </view>
      <u-line></u-line>
      <view class="setting-item" @click="goto('/pages/user/collection/collection')">
        <image src="/static/images/user/collect.png" class="setting-item-image"></image>
        <text class="setting-item-text">收藏</text>
        <u-icon name="arrow-right"></u-icon>
      </view>
      <u-line></u-line>
      <view class="setting-item" @click="goto('/pages/user/order/order')">
        <image src="/static/images/user/order.png" class="setting-item-image"></image>
        <text class="setting-item-text">订单</text>
        <u-icon name="arrow-right"></u-icon>
      </view>
      <u-line></u-line>
      <view class="setting-item" @click="goto('/pages/user/setting/setting')">
        <image src="/static/images/user/setting.png" class="setting-item-image"></image>
        <text class="setting-item-text">设置</text>
        <u-icon name="arrow-right"></u-icon>
      </view>
      <u-line></u-line>
      <view class="setting-item">
        <image src="/static/images/user/phone.png" class="setting-item-image"></image>
        <view style="flex: 1;margin-left: 32rpx;display: flex;justify-content: space-between">
          <text>联系客服</text>
          <text style="margin-right: 20rpx;color: #B0B0B0">9:30-18:30</text>
        </view>
        <u-icon name="arrow-right"></u-icon>
      </view>
    </view>

  </view>
</template>

<style scoped lang="scss">
.header {
  display: flex;
  margin: 80rpx 60rpx;


  .user_text {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 30rpx;
    align-self: end;
  }

  .user_name {
    font-weight: 550;
    margin-bottom: 10rpx;
    font-size: 45rpx;
    line-height: 65rpx;
    max-width: 400rpx;
    overflow: hidden;
    color: rgba(51, 51, 51, 1);
    font-family: "my-p-font";
  }

  .user_number {
    font-family: "my-p-font";
    font-size: 28rpx;
    color: rgba(176, 176, 176, 1);
  }
}

.user-card {
  position: relative;
  display: flex;
  justify-content: center;

  .user-card-image {
    width: 100vw;
    margin: 0rpx 60rpx;
    height: 180rpx;
  }

  .menban-item {
    width: 330rpx;
    height: 330rpx;
    top: -55rpx;
    left: 75rpx;
    position: absolute;
  }

  .car-content {
    width: 80vw;
    height: 100%;
    position: absolute;
    justify-content: space-between;
    display: flex;
    padding: 20rpx;
  }

  .card-btn {
    width: 160rpx;
    height: 60rpx;
    font-size: 24rpx;
    color: black;
  }

  .card-text {
    display: flex;
    flex-direction: column;
    margin-left: 20rpx;
    color: rgba(153, 153, 153, 1);
  }

}

.setting {
  display: flex;
  flex-direction: column;
  margin: 50rpx 60rpx;

  .setting-item {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 42rpx 0;

    .setting-item-image {
      width: 45rpx;
      height: 45rpx;
    }

    .setting-item-text {
      flex: 1;
      margin-left: 32rpx;
    }

  }

}


</style>
